<style lang="scss" scoped>
.detail {
  width: 100vw;
  height: 100vh;
  // background-color: white;
  // overflow: scroll;
  .header {
    width: 100%;
    height: 50px;
    // background: red;
  }
  .content {
    width: 100%;
    margin-top: 4px;
    // background-color: rgb(11, 47, 81);
    // padding-bottom: 200px;
    .content_text {
      width: 100%;
    }

    .footer {
      height: 60px;
    }

    .collect {
      display: flex;
      justify-content: right;
      margin: 18px 20px 0;
      color: #333;
      li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        img {
          width: 24px;
          height: 24px;
        }
        span {
          margin-left: 6px;
          font-size: 12px;
          color: #333;
        }
      }
    }
    .suggestbox {
      width: 100%;
      .suggest_childrenbox {
        width: calc(100vw - 40px);
        // height: 100px;
        margin: 0 20px;
        .suggest_header {
          width: 100%;
          height: 34px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .user {
            width: 200px;
            height: 34px;
            display: flex;
            align-items: center;
            img {
              width: 32px;
              height: 32px;
            }
          }
        }
        .suggest_text {
          width: 100%;
          height: auto;
          font-size: 12px;
          color: #333;
          line-height: 16px;
          margin-top: 10px;
        }
      }
    }
  }
}
.time {
  display: flex;
  justify-content: space-between;
  margin: 0 20px;
}
.none {
  margin-left: 20px;
}
.slide {
  width: 80px;
  height: 52px;
  display: block;
  margin: 160px auto 30px;
}
.text {
  font-size: 14px;
  color: var(--white-base);
  text-align: center;
}
.confirm {
  width: 96px;
  height: 46px;
  display: block;
  margin: 67px auto 0;
}
.MaskBack {
  width: 100vw;
  height: 100vh;
  background-color: rgba(#999, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  overflow-y: scroll;
}
.comment-lists {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100vw;
  height: calc(100vh - 70px);
  overflow-y: scroll;
}
.itembox {
  max-height: calc(100vh - 70px);
  padding-top: 20px;
  overflow-y: visible;
}
.comment-item {
  padding: 0 20px;
  display: flex;
  margin-bottom: 20px;
  &:first-child {
    margin-top: 30px;
  }
  .avator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .comment-content {
    margin-left: 20px;
    flex: 1;
    height: auto;
    min-height: 100px;
    background-color: #fff;
    border-radius: 6px;
    padding: 12px 10px 11px;

    position: relative;
    &::before {
      position: absolute;
      left: -20px;
      content: '';
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-right-color: #fff;
    }
    .user-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      .docIcon {
        width: 24px;
        height: 24px;
      }
    }
    .comment-text {
      margin-top: 16px;
      font-size: 12px;
      line-height: 16px;
      width: 100%;
      white-space: pre-wrap;
    }
    .comment-bot {
      display: flex;
      justify-content: space-between;
      margin-top: 18px;
      align-items: center;
      .times {
        font-size: 10px;
      }
      .likes {
        display: flex;
        justify-content: space-around;
        align-items: center;
        line-height: 16px;
        div {
          display: flex;
          margin-left: 16px;
          span {
            margin-left: 6px;
            font-size: 12px;
          }
          img {
            width: 16px;
            height: 16px;
          }
        }
      }
    }
  }
}
.noCommentImg {
  width: 122px;
  height: 122px;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
// 底部评论框
.comment-ipt {
  position: fixed;
  bottom: 30px;
  display: flex;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;

  img {
    width: 40px;
    height: 40px;
  }
  input {
    margin-left: 20px;
    flex: 1;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    border: none;
    background-color: #333;
    font-size: 14px;
    color: #fff;
    text-indent: 2em;
    &::placeholder {
      color: #fff;
    }
  }
}
</style>
<template>
  <div>
    <div class="detail">
      <div class="header">
        <homeTop2></homeTop2>
      </div>
      <div class="content">
        <div class="content_text">
          <knowdataitem labeltext="[姓名]" :children="detailData.adoptComment"> </knowdataitem>
          <knowdataitem labeltext="[病症]" :children="detailData.disease"> </knowdataitem>
          <knowdataitem labeltext="[科室]" :children="detailData.department"> </knowdataitem>
          <knowdataitem labeltext="[病症详情]" :children="detailData.detail"> </knowdataitem>
          <knowdataitem labeltext="[治疗经历]" :children="detailData.treatmentProcess">
          </knowdataitem>
          <div class="time">
            <span>{{ detailData.treatmentHospital ? detailData.treatmentHospital : '' }}</span>
            <span>{{ detailData.treatmentStartTime > 0 ? releaseTime : '' }}</span>
          </div>
          <knowbaseitem labeltext="[相关图片]"></knowbaseitem>
          <div>
            <img
              src="../../assets/images/image/xhdpi/certificate.png"
              alt=""
              style="width: 100%; height: 200px"
            />
          </div>
        </div>
        <ul class="collect">
          <li @click="tocollect">
            <img
              v-if="collection"
              src="../../assets/images/image/xhdpi/evaluation_star_n.png"
              alt=""
            />
            <img v-else src="../../assets/images/image/xhdpi/evaluation_star_s.png" alt="" />
            <span>{{ detailData.collectionNum }}</span>
          </li>
          <!-- <li>
            <img src="../../assets/images/image/xhdpi/evaluation_star_s.png" alt="" />
            <span>{{ detailData.collectionNum }}</span>
          </li> -->
          <li @click="open = true">
            <img src="../../assets/images/image/xhdpi/interview_news.png" alt="" />
            <span>{{ detailData.commentNum }}</span>
          </li>
        </ul>
        <div class="suggestbox">
          <navtitle title="被采纳的建议"></navtitle>
          <div
            class="suggest_childrenbox"
            v-if="
              detailData.adoptFlag >= 1 &&
              detailData.adoptHeadPic &&
              detailData.adoptNickName &&
              detailData.adoptTime &&
              detailData.adoptComment
            "
          >
            <div class="suggest_header">
              <div class="user">
                <div style="display: flex; justify-content: space-between; align-items: center">
                  <img
                    src="../../assets/images/image/xhdpi/boy.png"
                    alt=""
                    style="border-radius: 50%"
                  />
                  <p>{{ detailData.adoptNickName }}</p>
                </div>
              </div>
              <p class="suggest_timer">{{ time }}</p>
            </div>
            <div class="suggest_text">{{ detailData.adoptComment }}</div>
          </div>
        </div>
      </div>
      <div class="MaskBack" v-if="open">
        <div class="comment-lists" v-if="commentList.length">
          <div class="MaskBack" style="z-index: 10" v-if="isopen">
            <div>
              <img src="../../assets/images/image/hdpi/fell_gesture.png" class="slide" alt="" />
              <div class="text">下滑查看更多评论</div>
              <img
                src="../../assets/images/image/xxhdpi/know.png"
                class="confirm"
                alt=""
                @click="isopen = false"
              />
            </div>
          </div>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            class="itembox"
          >
            <div class="comment-item" v-for="v in commentList" :key="v.id">
              <img
                class="avator"
                src="https://www.helloimg.com/i/2024/10/18/67121c97ba86a.jpg"
                alt=""
                @click="handleto(v.commentUserId, v.nickName)"
              />
              <div class="comment-content">
                <div class="user-info">
                  <p>{{ v.nickName }}</p>
                  <img
                    src="../../assets/images/icon/common resource/xxhdpi/common_icon_inquiry_n.png"
                    class="docIcon"
                    alt=""
                  />
                </div>
                <div class="comment-text">{{ v.content }}</div>
                <div class="comment-bot">
                  <div class="times">
                    {{ v.commentTime }}
                  </div>
                  <div class="likes">
                    <div v-if="pointstatus">
                      <img
                        src="../../assets/images/icon/common resource/xxhdpi/common_icon_agree_n.png"
                        alt=""
                      />
                      <span>{{ num }}</span>
                    </div>
                    <div v-else>
                      <img
                        src="../../assets/images/icon/common resource/xxhdpi/common_icon_agree_s.png"
                        alt=""
                      />
                      <span>{{ num }}</span>
                    </div>
                    <div v-if="pointstatus1">
                      <img
                        src="../../assets/images/icon/common resource/xxhdpi/common_icon_disagree_n.png"
                        alt=""
                      />
                      <span>{{ num1 }}</span>
                    </div>
                    <div v-else>
                      <img
                        src="../../assets/images/icon/common resource/xxhdpi/common_icon_disagree_s.png"
                        alt=""
                      />
                      <span>{{ num1 }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-list>
        </div>
        <div class="comment-ipt">
          <img
            src="../../assets/images/icon/common resource/xxhdpi/common_button_close_n.png"
            alt=""
            @click="open = false"
          />
          <input
            type="text"
            v-model="commentvalue"
            @keydown="getpublishComment"
            :placeholder="commentList.length ? '在此留下高见吧！！' : '暂无评论，快来抢沙发！！'"
            name=""
            id=""
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import formData from '@/utils/formData.js'
import { useRoute, useRouter } from 'vue-router'
import homeTop2 from '@/components/homeTop2/index.vue'
import knowdataitem from '@/components/knowbaseitem/index.vue'
import navtitle from '@/components/navtitle/index.vue'
import { ElMessage } from 'element-plus'
import { request } from '@/axios/request'
// 引入接口
import {
  getSickCircleInfo,
  getSickCircleCommentList,
  getpublishCommentList,
  getaddUserSickCollection
} from '@/api'
const userId = ref(localStorage.getItem('userId'))
const sessionId = ref(Number(localStorage.getItem('sessionId')?.replace(/"/g, '')) || 0)
console.log(userId.value, sessionId.value)
const commentList: any = ref([])
const commentvalue = ref('')
const open = ref(false)
const loading = ref(false)
const finished = ref(false)
const isopen = ref(true)
const page = ref(1)
const collection = ref(true)
const pointstatus = ref(true)
const pointstatus1 = ref(true)
const img = ref(
  'https://img1.baidu.com/it/u=3034239006,2468054389&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697907600&t=14846c0a54327c5c94fd7e4edf218c8a'
)
const num = ref(1)
const num1 = ref(1)
const count = ref(5)
const route = useRoute()
const router = useRouter()
const detailData: any = ref([])
const sickCircleId = ref(route.params.id)
const releaseTime = ref('')
const time = ref()
const content = ref('23243')
console.log(sickCircleId)
const getSickCircleInfoList = async () => {
  const { data: res } = await getSickCircleInfo({
    sickCircleId: sickCircleId.value
  })
  // collectionNum
  console.log(res.result)
  detailData.value = res.result
  console.log(detailData.value)
  // let date = new Date(detailData.value.treatmentStartTime)
  // console.log(detailData.value.treatmentStartTime);
  // releaseTime.value = formData(date, 'yyyy-MM-dd hh:mm')
  // let date1 = new Date(detailData.value.adoptTime)
  // // console.log(detailData.value.adoptTime);
  // time.value = formData(date1, 'yyyy-MM-dd')
}
getSickCircleInfoList()
// 评论
const SickCircleCommentList = async () => {
  const { data: res } = await getSickCircleCommentList(
    {
      sickCircleId: sickCircleId.value,
      page: page.value,
      count: count.value
    },
    {
      headers: {
        userId: userId.value,
        sessionId: sessionId.value,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    }
  )
  commentList.value = res.result
}
SickCircleCommentList()
// 收藏病友圈
const tocollect = async () => {
  if (collection.value) {
    const { data: res } = await getaddUserSickCollection(
      {
        sickCircleId: sickCircleId.value
      },
      {
        headers: {
          userId: userId.value,
          sessionId: sessionId.value,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )
    console.log(res)
    if (res.status === '0000') {
      ElMessage.success(res.message)
      // message: res.message,
      // color: "#fff",
      // background: "green",
      collection.value = false
      // detailData.collectionNum.value += 1
    }
    getSickCircleInfoList()
  } else {
    await request.delete('/api/health/user/verify/v1/cancelSickCollection', {
      params: {
        sickCircleId: sickCircleId.value
      },
      headers: {
        userId: userId.value,
        sessionId: sessionId.value,
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    getSickCircleInfoList()
    ElMessage.error('取消收藏')
    collection.value = true
  }
}
// tocollect()
// 取消收藏病友圈
// const nocollect = async () => {
//   if (collection.value) {
//     const { data: res } = await getcancelSickCollection(
//       {
//         sickCircleId: sickCircleId.value
//       },
//       {
//         headers: {
//           userId: userId.value,
//           sessionId: sessionId.value,
//           'Content-Type': 'application/x-www-form-urlencoded'
//         }
//       }
//     )
//     console.log(res)
//     if (res.status === '8001') {
//       collection.value = false
//       ElMessage.error(res.message)
//     }
//     if (res.status === '0000') {
//       ElMessage.success(res.message)
//       // message: res.message,
//       // color: "#fff",
//       // background: "green",
//       collection.value = true
//       // detailData.collectionNum.value += 1
//     }
//   }
// }
// nocollect()
const getpublishComment = async (e: any) => {
  if (e.key === 'Enter') {
    // 按下回车键，执行获取数据的操作
    const { data: res } = await getpublishCommentList(
      {
        sickCircleId: sickCircleId.value,
        content: commentvalue.value
      },
      {
        headers: {
          userId: userId.value,
          sessionId: sessionId.value,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
    )

    console.log(res)
    SickCircleCommentList()
  }
}
// 跳转用户信息表
const handleto = (id: any, name: any) => {
  // console.log(111)
  router.push(`/comment/${id}/${name}`)
}
</script>
